<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双向绑定的例子</title>
</head>
<body>

<input class="inp-text" type="text" text="是vue的核心思想，通过对象底层属性的set和get进行数据拦截，">

<div class="text-box">

</div>
<script>
    //双向绑定的例子
    let obj = {};
    Object.defineProperty(obj, 'name', {
        set: function(newValue){
            console.log('触发setter');
            document.querySelector('.text-box').innerHTML = newValue;
            document.querySelector('.inp-text').value = newValue;
        },
        get: function(){
            console.log('触发getter');
        }
    });

    document.querySelector('.inp-text').addEventListener('keyup', function(e){
        obj.name = e.target.value;
    }, false);
    </script>
</body>
</html>